<template>
  <el-dialog
      title="详情"
      custom-class="x-large-dialog"
      :visible="visible"
      append-to-body
      @open="open"
      @close="close(),visible1=false"
  >
    <div class="detail-pannel">
      <el-form>
        <div class="group-title">租约</div>
        <el-row>
          <el-col :span="6">
            <el-form-item label="开始时间：">{{detailData.startTime | timeFilter('yyyy-MM-dd')}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结束时间：">{{detailData.endTime | timeFilter('yyyy-MM-dd')}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发起时间：">{{detailData.createdAt | timeFilter('yyyy-MM-dd')}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态：">{{detailData.status | leaseStatusFilter}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" v-if="detailData.persons && detailData.persons.length">
            <el-form-item label="入住人：">
              <p v-for="item in detailData.persons" :key="item.No">入住人姓名:{{item.name}}---入住人身份证号码:{{item.No}}</p>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form v-if="user">
        <div class="group-title">发起人信息</div>
        <el-row>
          <el-col :span="6" v-if="userInfo">
            <el-form-item label="用户头像：" v-if="userInfo.avatar"><el-image style="width: 60px;height: 60px;" :src="userInfo.avatar"></el-image></el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户名称：">{{user.userName}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户昵称：">{{user.nickName}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="注册时间:">{{user.createdAt | timeFilter}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form v-if="userInfo">
        <div class="group-title">发起人详情信息</div>
        <el-row>
          <el-col :span="6" v-if="userInfo">
            <el-form-item label="真实姓名：">{{userInfo.firstName + userInfo.secondName | falseFilter}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="住址：">{{userInfo.address | falseFilter}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号：">{{userInfo.phoneNum | falseFilter}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所在地区:">{{userInfo.area && userInfo.area.name | falseFilter}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form v-if="owner">
        <div class="group-title">房东信息</div>
        <el-row>
          <el-col :span="6" v-if="ownerInfo">
            <el-form-item label="用户头像：" v-if="userInfo.avatar"><el-image style="width: 60px;height: 60px;" :src="ownerInfo.avatar"></el-image></el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户名称：">{{owner.userName}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户昵称：">{{owner.nickName}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="注册时间:">{{owner.createdAt | timeFilter}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form v-if="ownerInfo">
        <div class="group-title">发起人详情信息</div>
        <el-row>
          <el-col :span="6" v-if="ownerInfo">
            <el-form-item label="真实姓名：">{{ownerInfo.firstName + ownerInfo.secondName | falseFilter}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="住址：">{{ownerInfo.address | falseFilter | falseFilter}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号：">{{ownerInfo.phoneNum | falseFilter | falseFilter}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所在地区:">{{ownerInfo.area && ownerInfo.area.name | falseFilter | falseFilter}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form v-if="house">
        <div class="group-title">房屋信息</div>
        <el-row>
          <el-col :span="6">
            <el-form-item label="房屋标题：">{{house.name}}</el-form-item>
          </el-col>
          <el-col :span="6" v-if="area">
            <el-form-item label="所在地区：">{{area.name}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="租金：">{{house.rent}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form v-if="houseInfo">
        <div class="group-title">房屋详细信息</div>
        <el-row>
          <el-col v-if="houseInfo.pictures" :span="12">
            <el-form-item label="房屋图片：">
              <el-image v-for="item in houseInfo.pictures.split('|')" :key="item" :src="item" style="width: 60px;height: 60px" />
            </el-form-item>
          </el-col>
          <el-col v-if="houseInfo.houseArea" :span="6">
            <el-form-item label="房屋面积：">{{houseInfo.houseArea}}（平方米）</el-form-item>
          </el-col>
          <el-col v-if="houseInfo.houseArea" :span="6">
            <el-form-item label="房屋楼层：">{{houseInfo.floor}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-if="houseInfo.type" :span="6">
            <el-form-item label="房型：">{{houseInfo.type}}</el-form-item>
          </el-col>
          <el-col v-if="houseInfo.personNum" :span="6">
            <el-form-item label="宜居人数：">{{houseInfo.personNum}}人</el-form-item>
          </el-col>
          <el-col v-if="houseInfo.direction" :span="6">
            <el-form-item label="朝向：">{{houseInfo.direction}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-if="houseInfo.remarks" :span="18">
            <el-form-item label="备注：">{{houseInfo.remarks}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-if="houseInfo.content" :span="18">
            <el-form-item label="房屋描述：">{{houseInfo.content}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer">
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { _getDetail } from '../src/store'
import { detailDialog } from '@/mixins'

export default {
  name: 'detailDialog',
  mixins: [detailDialog],
  data() {
    return {
      detailData: {},
      detailFunc: _getDetail,
      visible1: false,
      reason: ''
    }
  },
  computed: {
    user() {
      return this.detailData?.user
    },
    userInfo() {
      return this.detailData?.user?.userInfo
    },
    owner() {
      return this.detailData?.house?.Owner
    },
    ownerInfo() {
      return this.detailData?.house?.Owner.userInfo
    },
    house() {
      return this.detailData?.house
    },
    area() {
      return this.detailData?.house?.area
    },
    houseInfo() {
      return this.detailData?.house?.houseInfo
    }
  }
}
</script>

<style scoped>

</style>
